<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="main" style="width: 100%;height:400px;"></div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  option = {
    title: {
      // text: '产品'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['产品1', '产品2', '产品3', '产品4', '组合'],
      type: 'scroll',
      right: 30,
    },
    xAxis: {
      type: 'category',
      data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019'],
      boundaryGap: false,
    },
    toolbox: {
      feature: {
        // dataView: {//视图
        //   show: true
        // },
        // magicType: {//转换柱状、折线
        //   type: ['line', 'bar']
        // },
        // restore: {//还原
        //   show: true
        // },
        myTool1: {
          show: true,
          title: '下载',
          icon: 'image://./img/download.png',
          onclick: function() {

          }
        },
      }
    },
    yAxis: [{
      type: 'value',
      name: "产品价格"
    }, {
      type: 'value',
      name: "组合价格"
    }],
    series: [{
        data: [300, 200, 100, 300, 200, 230, 300],
        type: 'line',
        name: '产品1'
      }, {
        data: [100, 200, 100, 100, 200, 200, 201],
        type: 'line',
        name: '产品2'
      }, {
        data: [233, 11, 100, 200, 300, 100, 300],
        type: 'line',
        name: '产品3'
      }, {
        data: [233, 11, 100, 200, 300, 100, 300],
        type: 'line',
        name: '产品4'
      },
      {
        data: [12, 12, 20, 30, 32, 22, 22],
        type: 'line',
        name: '组合',
        yAxisIndex: 1,
        areaStyle: {
          color: 'red'
        }
      }
    ]
  };
  myChart.setOption(option)
  var picInfo = myChart.getDataURL() //获取当前视图的64编码
</script>

</html>
